<template>
    <el-container class="home">
        <el-header>
            <el-row class="home-nav">
                <div class="header-nav width1190">
                    <!-- nav-left -->
                    <div class="nav-left">
                        <div class="location">
                            <i class="el-icon-location"></i>
                            <span>{{ cityPosition }}</span>
                        </div>
                        <button @click="$router.push('/home/changeCity')">切换城市</button>
                        <ul class="city">
                            [
                            <li v-for="(item) in nearCity" :key="item.id">{{ item.name }}</li>
                            ]
                        </ul>
                        <div class="router-link" v-if='!isLogin'>
                            <a href="javascript:;" @click="$router.push('/login')">立即登录</a>
                            <a href="javascript:;" @click="$router.push('/register')">注册</a>
                        </div>
                        <dl class=" avatar" v-else>
                            <dt><img src="../static/avatar.jpg" alt=""></dt>
                            <dd @click='logout'>退出</dd>
                        </dl>
                    </div>
                    <!-- nav-right -->
                    <div class="nav-right">
                        <dl class="mt-mine">
                            <dt class="home_dt"><a href="javascript:;">我的美团</a></dt>
                            <dd>
                                <div>
                                    <a href="javascript:;">我的订单 </a>
                                    <a href="javascript:;">我的收藏</a>
                                    <a href="javascript:;">抵用券</a>
                                    <a href="javascript:;">账户设置</a>
                                </div>
                            </dd>
                        </dl>
                        <dl class="mt-phone">
                            <dt class="home_dt"><a href="javascript:;">手机APP</a></dt>
                        </dl>
                        <dl class="mt-merchant">
                            <dt class="home_dt">商家中心</dt>
                            <dd>
                                <div>
                                    <a href="javascript:;">美团餐饮商户中心</a>
                                    <a href="javascript:;">登录商家中心</a>
                                    <a href="javascript:;">美团智能收银</a>
                                    <a href="javascript:;">我想合作</a>
                                    <a href="javascript:;">手机免费开店</a>
                                    <a href="javascript:;">到店综合业务招募</a>
                                    <a href="javascript:;">餐饮合作商招募</a>
                                    <a href="javascript:;">商家申请开票</a>
                                    <a href="javascript:;">免费合作美团排队</a>
                                </div>
                            </dd>
                        </dl>
                        <dl class="mt-rule">
                            <dt class="home_dt">美团规则</dt>
                            <dd>
                                <a href="">规则中心</a>
                                <a href="">规则目录</a>
                                <a href="">规则评议院</a>
                            </dd>
                        </dl>
                        <dl class="mt-navigate">
                            <dt class="home_dt">网站导航</dt>
                            <dd class="width980">
                                <div>
                                    <el-col :span="6" :offset="1" :lg="{ span: 5, offset: 2 }">
                                        <dl class="hotel">
                                            <dt>酒店旅游</dt>
                                            <dd>
                                                <a href="javascript:;">国际机票</a>
                                                <a href="javascript:;">火车票</a>
                                                <a href="javascript:;">民宿</a>
                                                <a href="javascript:;">经济型酒店</a>
                                                <a href="javascript:;">主题酒店</a>
                                                <a href="javascript:;">商务酒店</a>
                                                <a href="javascript:;">公寓</a>
                                                <a href="javascript:;">豪华酒店</a>
                                                <a href="javascript:;">客栈</a>
                                                <a href="javascript:;">青年旅社</a>
                                                <a href="javascript:;">度假酒店</a>
                                                <a href="javascript:;">别墅</a>
                                                <a href="javascript:;">农家院</a>
                                            </dd>
                                        </dl>
                                    </el-col>
                                    <el-col :span="4" :offset="1">
                                        <dl>
                                            <dt>吃美食</dt>
                                            <dd class="food">
                                                <a href="javascript:;">烤鱼</a>
                                                <a href="javascript:;">特色小吃</a>
                                                <a href="javascript:;">烧烤</a>
                                                <a href="javascript:;">自助餐</a>
                                                <a href="javascript:;">火锅</a>
                                                <a href="javascript:;">代金券</a>
                                            </dd>
                                        </dl>
                                    </el-col>
                                    <el-col :span="2" :offset="1">
                                        <dl class="movie">
                                            <dt>看电影</dt>
                                            <dd>
                                                <a href="javascript:;"> 热映电影</a>
                                                <a href="javascript:;">热门影院</a>
                                                <a href="javascript:;">热映电影口碑榜</a>
                                                <a href="javascript:;">最受期待电影</a>
                                                <a href="javascript:;">国内票房榜</a>
                                                <a href="javascript:;">北美票房榜</a>
                                                <a href="javascript:;">电影排行榜 </a>
                                            </dd>
                                        </dl>
                                    </el-col>
                                    <el-col :span="5" :lg="{ span: 7, offset: 1 }" :offset="2">
                                        <dl>
                                            <dt>手机应用</dt>
                                            <dd class="pic">
                                                <a href="javascript:;" title="美团app"><img src="../static/meituan.jpg" alt="" /></a>
                                                <a href="javascript:;" title="外卖app"><img src="../static/waimai.jpg" alt="" /></a>
                                                <a href="javascript:;" title="民宿app"><img src="../static/minsu.jpg" alt="" /></a>
                                                <a href="javascript:;" title="点评app"><img src="../static/dianping.jpg" alt="" /></a>
                                                <a href="javascript:;" title="猫眼app"><img src="../static/maoyan.jpg" alt="" /></a>
                                            </dd>
                                        </dl>
                                    </el-col>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </el-row>

            <el-row class="header-content">
                <div class="header_content width1190">
                    <img src="../static/logo.png" alt="" @click='backHome'/>
                    <div class="search">
                        <input type="text" id="search" @focus="inputFocus" @blur="inputBlur" v-model="inputValue" @input="search" />
                        <span class="btn clearFix">
                            <i class="el-icon-search"></i>
                        </span>
                        <ul class="show-search" @click.capture="routerValueLink" v-show="isShowUl">
                            <li v-for="(item, index) in searchHistory" :key="index">{{ item }}</li>
                        </ul>
                    </div>
                </div>
                <!-- 搜索框以下 -->

                <el-row class="home-header" v-if="$route.name == 'home-content'">
                    <el-col>
                        <ul class="home-header-link">
                            <li v-for="list in navLink" :key="list.id">
                                <a href="javascript:;" @mouseenter="$event.target.style.color = list.color" @mouseleave="$event.target.style.color = '#000'" :title="list.title">{{ list.title }}</a>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
            </el-row>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
        <el-footer>
            <el-row class="home-footer width980" type="flex" justify="space-around">
                <el-col>
                    <dl>
                        <dt>用户帮助</dt>
                        <dd><a href="http://www.meituan.com/help/selfservice" target="_blank">申请退款</a></dd>
                        <dd><a href="http://www.meituan.com/help/faq" target="_blank">常见问题</a></dd>
                        <dd><a href="https://rules-center.meituan.com/rules-detail/4" target="_blank">用户协议</a></dd>
                        <dd><a href="https://rules-center.meituan.com/rules-detail/2" target="_blank">隐私政策</a></dd>
                        <dd><a href="http://www.meituan.com/about/anticheat" target="_blank">反诈骗公告</a></dd>
                        <dd><a href="https://rules-center.meituan.com/customer-rights" target="_blank">消费者权益保障</a></dd>
                    </dl>
                    <dl>
                        <dt>美团服务</dt>
                        <dd><a href="http://waimai.meituan.com/" target="_blank">美团外卖</a></dd>
                        <dd><a href="http://hotel.meituan.com/" target="_blank">美团酒店</a></dd>
                        <dd><a href="http://maoyan.com/" target="_blank">猫眼电影</a></dd>
                        <dd><a href="https://peisong.meituan.com/" target="_blank">美团配送</a></dd>
                        <dd><a href="https://www.mtyun.com/" target="_blank">美团云</a></dd>
                        <dd><a href="http://www.dianping.com/" target="_blank">大众点评</a></dd>
                        <dd><a href="https://minsu.meituan.com/" target="_blank">美团民宿</a></dd>
                        <dd><a href="https://mad.meituan.com" target="_blank">无人配送</a></dd>
                        <dd><a href="https://em.meituan.com/?channeltype=01,01,01" target="_blank">企业用餐、企业用车、企业差旅</a></dd>
                    </dl>
                </el-col>
                <el-col>
                    <dl>
                        <dt>商家合作</dt>
                        <dd><a rel="nofollow" href="https://ecom.meituan.com/bizsettle/settle?utm_source=mt_C_my" target="_blank">美食商家入驻(非外卖)</a></dd>
                        <dd><a href="https://kd.meituan.com/" target="_blank">美团外卖开店申请</a></dd>
                        <dd><a href="https://rms.meituan.com" target="_blank">美团餐饮系统</a></dd>
                        <dd><a rel="nofollow" href="http://page.peisong.meituan.com/apply/join" target="_blank">美团配送合作申请</a></dd>
                        <dd><a href="https://xue.meituan.com/?from=mtpc" target="_blank">美团餐饮培训</a></dd>
                        <dd><a rel="nofollow" href="https://ruzhu.meituan.com/settle/hotel/propaganda.html" target="_blank">酒店商家入驻</a></dd>
                        <dd><a rel="nofollow" href="https://ruzhu.meituan.com/settle/trip/pc.html" target="_blank">境内度假商家入驻</a></dd>
                        <dd><a rel="nofollow" href="https://e.dianping.com/claimcpc/page/index?source=mt" target="_blank">综合商家入驻</a></dd>
                        <dd><a rel="nofollow" href="https://minsu.meituan.com/about/" target="_blank">美团民宿房东商家入驻</a></dd>
                        <dd><a href="http://pc.meituan.com/?activity_code=mtpcdb" target="_blank">商家开票申请</a></dd>
                        <dd><a rel="nofollow" href="https://h5.youzan.com/v2/feature/nALm22bkFF?dc_ps=2039811416638097413.200001" target="_blank">美团智能收银机</a></dd>
                        <dd><a rel="nofollow" href="https://developer.meituan.com/?from=mtpcsw" target="_blank">美团开放平台</a></dd>
                        <dd><a rel="nofollow" href="https://recommend-zc.meituan.com/opportunity?channel=1" target="_blank">美团收单</a></dd>
                        <dd><a rel="nofollow" href="https://paidui.meituan.com/?activity_code=167_00038050" target="_blank">免费使用美团排队</a></dd>
                        <dd><a rel="nofollow" href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html" target="_blank">快驴进货商家合作</a></dd>
                        <dd><a rel="nofollow" href="https://shangou.meituan.com/joinin" target="_blank">美团闪购商家入驻</a></dd>
                        <dd><a rel="nofollow" href="https://123.meituan.com?source=mtwpc" target="_blank">合作/招聘</a></dd>
                    </dl>
                </el-col>
                <el-col>
                    <dl>
                        <dt>合作商招募</dt>
                        <dd><a rel="nofollow" href="https://mfe.waimai.meituan.com/mfepro/client-h5/#/login" target="_blank">美团外卖合作商招募</a></dd>
                        <dd><a rel="nofollow" href="https://daili.meituan.com/?comeFrom=mtwebBusinesscoopd" target="_blank">到店餐饮合作商招募</a></dd>
                        <dd><a rel="nofollow" href="https://daili.meituan.com/dz-zhaoshang" target="_blank">到店综合业务合作商招募</a></dd>
                        <dd><a rel="nofollow" href="http://union.meituan.com/" target="_blank">美团联盟</a></dd>
                        <dd><a rel="nofollow" href="https://wenjuan.meituan.com/survey/4332711" target="_blank">美团收银招募线上分销商</a></dd>
                        <dd><a rel="nofollow" href="https://agent.meituan.com/zhaoshang?partnerSource=3" target="_blank">美团收银合作商招募</a></dd>
                        <dd><a rel="nofollow" href="https://zf.meituan.com?partnerSource=3" target="_blank">美团收单合作商招募</a></dd>
                        <dd><a rel="nofollow" href="https://i.meituan.com/awp/hfe/block/index.html?cube_h=2b7f0b4afbea&amp;cube_i=97656" target="_blank">美团充电宝合作商招募</a></dd>
                        <dd><a rel="nofollow" href="https://managergrocery.meituan.com/mall-fe-agent-activity/clues-collect.html?page_from=30" target="_blank">美团优选渠道合作商招募</a></dd>
                        <dd><a rel="nofollow" href="https://vss.baobaoaichi.cn/" target="_blank">美团买菜合作商招募</a></dd>
                    </dl>
                    <dl>
                        <dt>美团规则</dt>
                        <dd><a rel="nofollow" href="https://rules-center.meituan.com/" target="_blank">规则中心</a></dd>
                        <dd><a rel="nofollow" href="https://rules-center.meituan.com/rules" target="_blank">规则目录</a></dd>
                        <dd><a rel="nofollow" href="https://rules-center.meituan.com/advices" target="_blank">规则评议院</a></dd>
                    </dl>
                </el-col>
                <el-col>
                    <dl>
                        <dt>关注美团</dt>
                        <dd><a rel="nofollow" href="http://weibo.com/meituan" target="_blank">美团新浪微博</a></dd>
                    </dl>
                    <dl>
                        <dt>公司信息</dt>
                        <dd><a rel="nofollow" href="https://about.meituan.com/" target="_blank">关于我们</a></dd>
                        <dd><a rel="nofollow" href="https://about.meituan.com/investor.html" target="_blank">投资者关系</a></dd>
                        <dd><a rel="nofollow" href="http://zhaopin.meituan.com/" target="_blank">加入我们</a></dd>
                        <dd><a rel="nofollow" href="https://dpapp-appeal.meituan.com/#/shopCreditRegulationPC" target="_blank">商户诚信公约及管理办法</a></dd>
                        <dd><a rel="nofollow" href="https://i.meituan.com/awp/ffe/insurance-website/index.html#/" target="_blank">保险经纪资质</a></dd>
                    </dl>
                    <dl>
                        <dt>廉正举报</dt>
                        <dd><a rel="nofollow" href="https://jubao.meituan.com/app/home?source=1" target="_self">廉正举报平台</a></dd>
                    </dl>
                    <dl>
                        <dt>知识产权</dt>
                        <dd><a rel="nofollow" href="https://ipr.meituan.com?source=1" target="_blank">知识产权维权平台</a></dd>
                    </dl>
                </el-col>
                <el-col>
                    <dl>
                        <dt>消费者服务热线</dt>
                        <dd>外卖消费者：<a rel="nofollow" href="tel:10109777" target="_blank">10109777</a></dd>
                        <dd>猫眼消费者：<a rel="nofollow" href="tel:10105335" target="_blank">10105335</a></dd>
                        <dd>其他消费者：<a rel="nofollow" href="tel:10107888" target="_blank">10107888</a></dd>
                    </dl>
                    <dl>
                        <dt>商家服务热线</dt>
                        <dd>外卖&amp;餐饮商家：<a rel="nofollow" href="tel:10105557" target="_blank">10105557</a></dd>
                        <dd>休闲娱乐、丽人、ktv、教育、结婚、亲子、家装等商家：<a rel="nofollow" href="tel:10100107" target="_blank">10100107</a></dd>
                    </dl>
                    <dl>
                        <dt>投诉举报专区</dt>
                        <dd>违法和不良信息举报电话：<a rel="nofollow" href="tel:4006018900" target="_blank">4006018900</a></dd>
                        <dd>举报邮箱：<a rel="nofollow" href="mailto:tousujubao@meituan.com" target="_self">tousujubao@meituan.com</a></dd>
                        <dd><a rel="nofollow" href="https://www.12377.cn/" target="_blank">网上有害信息举报</a></dd>
                        <dd>注：<a rel="nofollow" href="" target="">以上渠道均可投诉举报涉未成年人的违法和不良信息</a></dd>
                    </dl>
                    <dl>
                        <dt><a rel="nofollow" href="https://ecom.meituan.com/bizsettle/settle/merchantsSettle" target="_blank">商家自助入驻美团入口</a></dt>
                    </dl>
                    <dl>
                        <dt><a rel="nofollow" href="https://isp.meituan.com/signup" target="_blank">供应商注册入口</a></dt>
                    </dl>
                </el-col>
            </el-row>
            <el-row class="copyright width980" type="flex" justify="space-between">
                <div class="footer-copyright-left">
                    <p>©美团网团购 meituan.com<a href="https://beian.miit.gov.cn/" style="margin-left: 20px">京ICP证070791号</a><a href="https://beian.miit.gov.cn">京ICP备10211739号-1</a></p>
                    <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/comment/license/tv" target="_blank">广播电视节目制作经营许可证（京）字第03889号</a></p>
                    <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/medicalcertificate" target="_blank">互联网药品信息服务资格证 (京)-经营性-2017-0014</a></p>
                    <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/medicalequipment" target="_blank">医疗器械网络交易服务第三方平台备案：（京）网械平台备字[2018]第00004号</a></p>
                    <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/edilicense" target="_blank">平台EDI许可证</a></p>
                </div>
                <div class="footer-copyright-right">
                    <a align="right" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002052" target="_blank"><img class="beianicon" src="https://p0.meituan.net/travelcube/d0289dc0a46fc5b15b3363ffa78cf6c719256.png" />京公网安备 11000002002052号</a>
                    <div class="footer-copyright-cert">
                        <a
                            class="bus-license"
                            href="https://zzlz.gsxt.gov.cn/businessCheck/verifKey.do?showType=p&amp;serial=11000020190617184241000003572274-SAIC_SHOW_10002020190618102726868&amp;signData=MEQCIMo7nivRikGQc6WsX/jx0IcZ46irhkjszdhhg4kv17uBAiD78duadRu3XX5WyuE+duSrhPmdVUFgr7cN1iV/WSv4uw=="
                            title="营业执照"
                            target="_blank"
                            ><img src="https://p1.meituan.net/travelcube/3e7f8a17e55bace814166b667618b459366061.png@76h_76w_2e" />
                            <p>北京三快科技有限公司</p></a
                        ><a class="sp-ft sp-ft--record" href="https://beian.miit.gov.cn/?spm=a21bo.21814703.1997523009.40.5af911d9saMbGy#/Integrated/index" title="备案信息" target="_blank">备案信息</a
                        ><a class="sp-ft sp-ft--12315" href="http://www.12315.cn/" title="12315消费争议" target="_blank">12315消费争议</a>
                    </div>
                </div>
            </el-row>
        </el-footer>
    </el-container>
</template>

<script>
import { throttle } from '../util/plugin.js'
import {mapState } from 'vuex' 

export default {
    data() {
        return {
            location: '德清',
            inputValue: '',
            searchHistory: [],
            isShowUl: false,
            navLink: [
                {
                    id: 1,
                    title: '美团外卖',
                    color: '#fbc700',
                },
                { id: 2, title: '猫眼电影', color: '#ed1e24' },
                { id: 3, title: '美团酒店', color: '#f04d4e' },
                { id: 4, title: '民宿／公寓', color: '#FDC411' },
                { id: 5, title: '商家入驻', color: '#FE8C00' },
                { id: 6, title: '美团公益', color: '#f04d4e' },
            ],
            timer: null,
            throttle: null,
        }
    },
    created(){
        if(!localStorage.getItem('cityPosition')){
            this.$store.dispatch('getPosition')
        }
    },
    mounted() {
        this.throttle = throttle(300)
    },
    watch:{
        "$route"(to,from){
                if(to.path==from.path){
                    return 
                }
        }
    },
    computed:{
        ...mapState(['userName','cityPosition','isLogin','nearCity'])
    },
    methods: {
        search() {
            this.throttle(async () => {
                //防抖
                let val = this.inputValue && this.inputValue.trim()
                if (val) {
                    const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/header/search.json' })
                    if (res.list.length >= 5) {
                        this.searchHistory = res.list.splice(0, 5)
                        console.log(this.searchHistory)
                    }
                } else {
                    this.searchHistory = []
                }
            })
        },
        async inputFocus() {
            if (this.searchHistory.length < 1) {
                const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/header/searchHotWords.json' })
                this.searchHistory = res || []
            }
            this.isShowUl = true
        },
        inputBlur() {
            //    $event.stopPropagation()
            this.timer = setTimeout(() => {
                this.isShowUl = false
                clearTimeout(this.timer)
                this.timer = null
            }, 200)
        },
        routerValueLink($event) {
            //点击某个搜索选项跳转
            
            console.log($event.target.textContent)
            this.$router.push({path:"/home/searchValue",query:{s:$event.target.textContent}})
            this.isShowUl = false
        },
        logout(){
            this.$store.commit('logout')
        },
        backHome(){
            if(this.$route.name!='home'&&this.$route.name!='home-content'){
                this.$router.push('/home')
            }else{
                return 
            }
        },
       
    },
    beforeDestroy() {
        clearTimeout(this.timer)
        this.timer = null
    },
}
</script>

<style lang="less" scoped>
@import '../util/public.less';
.el-container.home {
    position: relative;
    background: #fafafa;
    width: 100%;
    .el-header {
        position: relative;
        height: 100% !important;
        background: #fff;
        color: @mt-888;
        box-shadow: 0 0 15px #ddd;
        font-size: 12px;
        .el-row.home-nav {
            position: relative;
            background: #f8f8f8;
            height: 40px;

            div.header-nav {
                position: relative;
                display: flex;
                justify-content: space-between;
                line-height: 40px;
                div.nav-left {
                    display: flex;
                    width: 400px;
                    font-size: 12px !important;
                    color: @mt-888;

                    button {
                        padding: 3px;
                        height: 18px;
                        line-height: 11px;
                        margin: 11px 5px 0;
                        color: @mt-888;
                        border: 1px solid #eee;
                        border-radius: 2px;
                        background: transparent;
                        .hoverFn();
                    }
                    ul.city {
                        display: flex;
                        padding: 0;
                        margin: 0;
                        li {
                            margin: 0 5px;
                            color: @mt-888;
                            .hoverFn();
                        }
                    }
                    div.router-link {
                        margin-left: 20px;
                        a {
                            color: @mt-888 !important;
                            .hoverFn();
                            &:first-child {
                                color: @mt-color !important;
                                margin-right: 7px;
                            }
                        }
                    }
                    dl.avatar{
                        position: relative;
                        margin: 0 15px;
                        display: flex;
                        flex-direction: column;
                        height: 80px;
                        z-index: 1;
                        &:hover{
                            background: #ccc;
                            box-sizing: 0 0 5px #eee;
                            dd{
                                display: block;
                            }

                        }
                        dt{
                            margin: 0;
                            height: 40px;
                            width: 40px;
                            img{
                        
                            height: 40px;
                            width: 40px;
                            border-radius: 50%;
                            }
                        }
                        dd{
                            display: none;
                            margin: 0;
                            text-align: center;
                            cursor: pointer;
                        }
                    }
                }
                //nav-right
                div.nav-right {
                    display: flex;

                    > dl {
                        width: 80px;
                        margin: 0;
                        text-align: center;
                        position: relative;
                        box-sizing: border-box;
                        z-index: 999;
                        > dt.home_dt {
                            .hoverFn;
                            cursor: text;
                            a {
                                color: @mt-888 !important;
                                .hoverFn();
                            }
                        }
                        &:not(.mt-phone):hover {
                            background: #fff;
                            box-shadow: 0 0 10px #ddd;
                            & > dt:after {
                                content: '';
                                height: 15px;
                                width: 100%;
                                background: #fff;
                                position: absolute;
                                left: 0;
                                top: 33px;
                                z-index: 999;
                            }
                            > dd {
                                display: block;
                                margin: 0;
                                background: #fff;
                                box-shadow: 0 0 10px #ddd;
                                a {
                                    display: block;
                                    color: @mt-888 !important;
                                    &:hover {
                                        color: @mt-color !important;
                                    }
                                }
                            }
                        }

                        > dd {
                            display: none;
                            & > div {
                                display: flex;
                                flex-direction: column;
                                a {
                                    color: @mt-888 !important;
                                    display: block;
                                    width: 80px;
                                    height: 35px;
                                    line-height: 35px;
                                }
                            }
                        }
                        &.mt-mine {
                            // height: 180px;
                        }
                        &.mt-merchant {
                            dd {
                                position: absolute;
                                right: 0;
                                width: 120px;
                                a {
                                    width: 100%;
                                }
                            }
                        }
                        &.mt-navigate {
                            > dd {
                                position: absolute;
                                right: 0;
                                height: 300px;
                                & > div {
                                    display: flex;
                                    flex-direction: row;
                                    width: 100%;
                                    height: 100%;
                                    .el-col {
                                        dl {
                                            &.movie {
                                                & > dd > a {
                                                    width: 100%;
                                                }
                                            }
                                            // width: 100%;
                                            dt {
                                                width: 100%;
                                                text-align: center;
                                                color: #111;
                                                margin-bottom: 15px;
                                            }
                                            dd {
                                                display: flex;
                                                flex-direction: row;
                                                justify-content: space-between;
                                                flex-wrap: wrap;
                                                margin-left: 0;
                                                &.food {
                                                    justify-content: space-evenly;
                                                }
                                                a {
                                                    height: 30px;
                                                    line-height: 30px;
                                                    display: block;
                                                    // width: 100%;
                                                    color: #aaa !important;
                                                }
                                                &.pic {
                                                    justify-content: space-evenly;
                                                    a {
                                                        margin-top: 5px !important;
                                                        height: 60px;
                                                        width: 60px;
                                                        padding: 2px;
                                                        cursor: pointer;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .el-row.header-content {
            position: relative;
            div.header_content {
                padding-top: 30px;
                height: 90px;
                display: flex;
                line-height: 46px;
                img {
                    height: 46px;
                }
                div.search {
                    margin: 0 auto;
                    position: relative;
                    input#search {
                        width: 380px !important;
                        height: 40px;
                        box-sizing: border-box;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                        outline: none;
                        padding-left: 15px;
                        line-height: 40px;
                        float: left;
                        &:focus {
                            border: 1px solid #ccc !important;
                        }
                    }
                    span.btn {
                        float: left;
                        box-sizing: border-box;
                        height: 40px;
                        width: 80px;
                        cursor: pointer;
                        border-top-right-radius: 5px;
                        border-bottom-right-radius: 5px;
                        text-align: center;
                        line-height: 40px;
                        font-size: 20px;
                        font-weight: 1000;
                        color: #000;
                        background: @mt-bg;
                    }
                    ul.show-search {
                        // display: none;
                        min-height: 20px;
                        border: 1px solid #ccc;
                        position: absolute;
                        top: 39px;
                        width: 380px;
                        box-sizing: border-box;
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                        z-index: 999;
                        background: #fff;
                        li {
                            height: 30px;
                            line-height: 30px;
                            color: #222;
                            padding-left: 15px;
                            .hoverFn();
                            &:hover {
                                background: #ccc;
                                color: @mt-color;
                            }
                        }
                    }
                }
            }
            .el-row.home-header {
                position: relative;
                height: 35px;

                // width: 100%;
                .el-col {
                    min-width: 1190px;
                    ul.home-header-link {
                        display: flex;
                        bottom: 0;
                        justify-content: space-around;
                        width: 560px;
                        margin: 0 auto !important;
                        font-size: 16px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .el-main {
        // position: relative;
        // height: 100% !important;
        padding: 10px 0 !important;
        z-index: 10;
        overflow: visible;
    }

    .el-footer {
        & > .el-row.home-footer {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            & > .el-col {
                width: 174px;
                dt {
                    margin: 0 0 8px;
                    > a {
                        font-size: 14px;
                        color: @mt-666 !important;
                        .hoverFn();
                    }
                }
                & > dl > dd {
                    margin-left: 0;
                    min-height: 22px;
                    font-size: 12px;
                    color: @mt-666;
                    > a {
                        font-size: 12px;
                        color: @mt-666 !important;
                        .hoverFn();
                    }
                }
            }
        }
        .el-row.copyright {
            padding-top: 20px;
            height: 140px !important;
            p {
                margin: 0;
                font-size: 12px;
                color: @mt-888;
                a {
                    color: @mt-888 !important;
                    .hoverFn();
                }
            }
            div.footer-copyright-right {
                & > a {
                    display: block;
                    padding: 0 0 8px;
                    font-size: 12px !important;
                    color: @mt-888 !important;
                    .hoverFn();
                    img {
                        height: 15px;
                    }
                }
                div.footer-copyright-cert {
                    display: flex;
                    a {
                        img {
                            vertical-align: middle;
                            height: 38px;
                            margin-right: 3px;
                        }
                        p {
                            display: inline-block;
                            .hoverFn();
                        }
                        &.sp-ft {
                            text-indent: -20em;
                            overflow: hidden;
                            margin: 0 3px;
                            width: 110px;
                            &.sp-ft--record {
                                background: url(../static/footer.png);
                                background-position: 0 -167px;
                            }
                            &.sp-ft--12315 {
                                background: url(../static/footer.png);
                                background-position: 0 -40px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
